<template>
  <div class="ii">
    <video
      ref="root"
      width="2000"
      height="2000"
      crossorigin="anonymous"
      preload="auto"
      loop
      :src="urr"
      type="video/mp4"
    ></video>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import { zcVaccineDelApi } from '@/api/cy/VaccineInject'

const props = defineProps({
  id: {
    type: String,
    default: () => null
  }
})

const root = ref()

const urr =
  'https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4'
onMounted(() => {
  // DOM元素将在初始渲染后分配给ref
  // <div>这是根元素</div>

  root.value.play()
})
setTimeout(() => {
  console.log(props.id)
  if (props.id > 2) {
    zcVaccineDelApi({ id: props.id - 2 })
  }
}, 200)
</script>

<style lang="scss" scoped>
.ii {
  position: absolute;
  top: 50px;
}
div {
  position: absolute;
  top: 50px;
}
</style>
